<template>
  <van-popup v-model:show="show" style="width: 400px" round @click-overlay="closeModal">
    <div class="rounded m-2 p-2">
      <div class="w-full p-2 border-b mb-2">添加下级账号</div>
      <div class="mb-1">
        <div class="flex justify-between text-sm font-bold">
          <span>
            <span class="text-red-500">*</span>
            请输入下级账号</span
          >
        </div>
        <input
          placeholder="请设置下级登录账号"
          type="text"
          v-model="formRef.username"
          class="border rounded p-1 w-full"
        />
      </div>

      <div class="mb-1">
        <div class="flex justify-between text-sm font-bold">
          <span>
            <span class="text-red-500">*</span>
            昵称</span
          >
        </div>
        <input type="text" v-model="formRef.nickname" class="border rounded p-1 w-full" />
      </div>

      <div class="mb-1">
        <div class="flex justify-between text-sm font-bold">
          <span>
            <span class="text-red-500">*</span>
            请输入登录密码</span
          >
        </div>
        <input
          placeholder="请设置登录密码"
          type="text"
          v-model="formRef.password"
          class="border rounded p-1 w-full"
        />
      </div>

      <div class="mb-1">
        <div class="flex justify-between text-sm font-bold">
          <span>
            <span class="text-red-500">*</span>
            确认登录密码</span
          >
        </div>
        <input
          placeholder="再次确认登录密码"
          type="text"
          v-model="formRef.confirm_password"
          class="border rounded p-1 w-full"
        />
      </div>

      <div class="mb-1">
        <div class="flex justify-between text-sm font-bold">
          <span> 联系方式</span>
        </div>
        <input type="text" v-model="formRef.contact" class="border rounded p-1 w-full" />
      </div>
    </div>
    <div class="m-2 flex justify-between">
      <button
        @click="show = false"
        class="border border-white rounded text-black bg-gray-100 px-4 py-1"
      >
        返回
      </button>
      <button @click="submit" class="border border-white rounded text-white bg-blue-500 px-4 py-1">
        确认添加
      </button>
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import { defineEmits, ref, computed } from 'vue'
import { AddUserApi } from '@/apis/group'
import { showNotify } from 'vant'

const emit = defineEmits(['update:show-modal', 'ok'])

const formRef = ref({
  username: '',
  password: '',
  confirm_password: '',
  nickname: '',
  contact: ''
})

const props = defineProps({
  showModal: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ''
  }
})

const show = computed({
  get() {
    return props.showModal || false
  },
  set(val) {
    emit('update:show-modal', val)
  }
})
function submit() {
  AddUserApi(formRef.value).then(() => {
    showNotify({ type: 'success', message: '添加成功' })
    show.value = false
    emit('ok')
  })
}
</script>
